<template>
  <div class="navbar">
    <div class="placeholder" />
    <div class="nav-content">
      <div class="nav-button">
        <div v-if="!noBack" class="nav-button-wrapper" @click="back">
          <van-icon name="arrow-left" color="#fff" />
        </div>
      </div>
      <div class="title">
        {{ title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = defineProps<{
  title: string
  noBack?: boolean
  fooBack?: boolean
}>()
const emit = defineEmits(['back'])
const router = useRouter()

const back = () => {
  if (props.fooBack) {
    emit('back')
  } else {
    router.back()
  }
}
</script>

<style lang="less" scoped>
.navbar {
  background-color: #3a75c5;
  position: relative;
  flex-shrink: 0;
  height: 48px;
  .placeholder {
    // height: 42px;
    height: 0px;
    width: 100%;
  }

  .nav-content {
    display: flex;
    height: 48px;
    align-items: center;
    padding: 0px 7px;
    .nav-button {
      width: 90px;
      display: flex;
      flex-shrink: 0;
      .nav-button-wrapper {
        font-size: 15px;
        padding: 10px;
      }
    }
    .title {
      font-size: 17px;
      color: #fff;
      width: 100%;
      padding-right: 90px;
      flex-grow: 1;
      text-align: center;
    }
  }
}
</style>
